import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

Item {
    id: info
	width: 500; height: 160;
	
	signal newGame();
	
	property alias scoreNum: scoreText.text;
	property alias bestNum: bestText.text;
	
	Rectangle{
		anchors.left: parent.left;
		anchors.top: parent.top;
		anchors.topMargin: 20;
		width: 200; height: 80;
		Text{
			anchors.fill: parent;
			horizontalAlignment: Text.AlignHCenter;
			font{pointSize: 55; weight: Font.Bold;}
			color: "#776E65";
			text: "2048";
		}
	}
	
	Rectangle{
		id: scoreBtn;
		anchors.right: bestBtn.left;
		anchors.top: parent.top;
		anchors.margins: 6;
		width: 112; height: 56;
		radius: 2;
		color: "#BBADA0";
		Text {
			anchors.top: parent.top;
			anchors.horizontalCenter: parent.horizontalCenter;
			anchors.topMargin: 4;
			font {pointSize: 10; bold: true; letterSpacing: 1;}
			color: "white";
			text: "SCORE";
		}
		Text{
			id: scoreText;
			anchors.bottom: parent.bottom;
			anchors.horizontalCenter: parent.horizontalCenter;
			anchors.bottomMargin: 4;
			font {pointSize: 22; bold: true;}
			color: "white";
		}
			
	}
		
	Rectangle{
		id: bestBtn;
		anchors.right: parent.right;
		anchors.top: parent.top;
		anchors.margins: 6;
		width: 112; height: 56;
		radius: 2;
		color: "#BBADA0";
		Text {
			anchors.top: parent.top;
			anchors.horizontalCenter: parent.horizontalCenter;
			anchors.topMargin: 4;
			font {pointSize: 10; bold: true; letterSpacing: 1;}
			color: "white";
			text: "BEST";
		}
		Text{
			id: bestText;
			anchors.bottom: parent.bottom;
			anchors.horizontalCenter: parent.horizontalCenter;
			anchors.bottomMargin: 4;
			font {pointSize: 20; bold: true;}
			color: "white";
		}
			
	}
		
		Text{
			anchors.left: parent.left;
			anchors.bottom: parent.bottom;
			width: 350; height: 30;
			font {pointSize: 11;}
			color: "#776E65";
			text: "Join the numbers and get to the <strong>2048 tile!</strong>";
		}
		
		Button {
			id: newGameBtn;
			anchors.right: parent.right;
			anchors.bottom: parent.bottom;
			anchors.margins: 6;
			width: 130; height: 45;
			text: "New Game";
            onClicked: {
				info.newGame();
            }
			style: ButtonStyle{
				background: Rectangle{
					//border.width: control.pressed ? 2: 1;
					//border.color: (control.hovered || control.pressed) ? "green" : "#88888";
					radius: 2;
					color: "#8F7A66";
				}
				label: Text{
					text: control.text;
					verticalAlignment: Text.AlignVCenter;
					horizontalAlignment: Text.AlignHCenter;
					color: "white";
					//style: Text.Normal;
					font{pointSize: 15; weight: Font.Bold;}
				}
			}
		}
}
